import React, { useState, useEffect } from 'react'
import Taro from '@tarojs/taro'
import {
  AtCard,
  AtButton,
  AtDivider,
  AtActivityIndicator,
  AtMessage
} from 'taro-ui'
import { View, Button, Image, Text, ScrollView } from '@tarojs/components'
import { getPersonalDetailRank, getCanlandar } from '../../../../api/index'
import './index.scss'
import EChart from 'techarts'
// 自定义构建的echarts
import * as echarts from './../../echarts'
import sortArr from '../../../../utils/sort'

interface PropsType {
  id: number
  detail: PersonalDetail
}

interface PersonalDetail {
  face: string
  name: string
  OfficialVerifyDesc: string
  sign: string
  fans: number
  archiveView: number //播放总数
  likes: number
  totalFavourite: number //收藏
  archiveCount: number //作品总数
  totalCount: number //充电总数
}

interface PersonalRank {
  tagName: string
}

interface PersonalDetailRank {
  rank: string
  typeid: Array<PersonalRank>
}

export default (props) => {
  const { id, detail } = props as PropsType
  const [loading, setLoading] = useState(true)
  const [option, setOption] = useState({
    title: {
      top: 0,
      left: 'center',
      text: 'up主发布视频日历图'
    },
    visualMap: {
      show: false,
      min: 0,
      max: 10
    },
    calendar: {
      range: [] as Array<string>,
      width: '300px',
      yearLabel: {
        show: false
      }
    },
    series: {
      type: 'heatmap',
      coordinateSystem: 'calendar',
      data: [[]]
    }
  })
  const [rankData, setRankData] = useState<Array<PersonalDetailRank>>()
  const [personalDetail, setPersonalDetail] = useState<PersonalDetail>()

  useEffect(() => {
    if (detail) {
      setPersonalDetail(detail)
    }
    ;(async () => {
      if (id) {
        const {
          data: { data, errorCode, errorMessage }
        } = await getPersonalDetailRank({
          id
        })
        if (!errorCode) {
          setRankData(data)
        } else {
          Taro.atMessage({
            message: errorMessage + ',请充值',
            type: 'error'
          })
        }
      }
    })()
    ;(async () => {
      let res = [] as Array<any>
      if (id) {
        const {
          data: { data, errorCode, errorMessage }
        } = await getCanlandar({
          id
        })
        if (!errorCode) {
          if (Object.keys(data?.canlandarData).length !== 0) {
            for (let key in data.canlandarData) {
              let number = data.canlandarData[key]
              res.push([key, number])
            }

            res = sortArr(res)

            let startTime = res[0][0] as string
            let endTime = res[res.length - 1][0] as string

            setOption({
              title: {
                top: 0,
                left: 'center',
                text: 'up主发布视频日历图'
              },
              visualMap: {
                show: false,
                min: 0,
                max: 10
              },
              calendar: {
                range: [startTime, endTime],
                width: '300px',
                yearLabel: {
                  show: false
                }
              },
              series: {
                type: 'heatmap',
                coordinateSystem: 'calendar',
                data: res
              }
            })
            setLoading(false)
          } else {
            console.log('没数据')
            setLoading(false)
          }
        } else {
          Taro.atMessage({
            message: errorMessage + '，请充值',
            type: 'error'
          })
        }
      }
    })()
  }, [id, detail])

  let onInit = (canvas, width, height, dpr) => {
    const chart = echarts.init(canvas, 'light', {
      width: width,
      height: height,
      devicePixelRatio: dpr // new
    })
    // 返回官网echarts实例
    return chart
  }
  return (
    <View className="personal-total-wrap">
      {loading ? (
        <AtActivityIndicator mode="center" />
      ) : (
        <View>
          <AtCard title="分区排名">
            <View className="personal-rank-wrap">
              {rankData?.map((item, index, array) => {
                if (index >= array.length - 2) {
                  return (
                    <Text className="personal-rank-text">
                      {item.typeid[0]?.tagName}: NO.{item.rank}
                    </Text>
                  )
                } else {
                  return <Text />
                }
              })}
            </View>
          </AtCard>
          <View style={{ padding: '20px' }}></View>
          {/* <AtDivider></AtDivider> */}
          <AtCard title="总体数据">
            {personalDetail ? (
              <View>
                <View className="personal-data-wrap">
                  <Text>
                    粉丝总数: {(personalDetail.fans / 10000).toFixed(2) + '万'}
                  </Text>
                  <Text>作品总数: {personalDetail.archiveCount}</Text>
                </View>
                <View className="personal-data-wrap">
                  <Text>
                    播放总数:{' '}
                    {(personalDetail.archiveView / 10000).toFixed(2) + '万'}
                  </Text>
                  <Text>
                    点赞总数: {(personalDetail.likes / 10000).toFixed(2) + '万'}
                  </Text>
                </View>
                <View className="personal-data-wrap">
                  <Text>
                    收藏总数:{' '}
                    {(personalDetail.totalFavourite / 10000).toFixed(2) + '万'}
                  </Text>
                  <Text>
                    充电总数:{' '}
                    {(personalDetail.totalCount / 10000).toFixed(2) + '万'}
                  </Text>
                </View>
              </View>
            ) : (
              <View></View>
            )}
          </AtCard>
          <ScrollView scrollX scrollWithAnimation>
            {loading ? (
              <AtActivityIndicator mode="center" />
            ) : (
              <View className="page-index">
                <View className="line-chart">
                  <EChart echarts={echarts} option={option} onInit={onInit} />
                </View>
              </View>
            )}
          </ScrollView>
        </View>
      )}
    </View>
  )
}
